<script setup>
import 'element-plus/dist/index.css';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { ElMessage } from 'element-plus';

const userStore = useUserStore();
const router = useRouter();

// 定义响应式数据
const username = ref(''); // 用户名
const password = ref(''); // 密码
const confirmPassword = ref(''); // 确认密码

// 跳转登录页面
const getLogin = () => {
  router.push({ path: '/' })
};

// 验证用户名
const validateUsername = () => {
  const usernameRegex = /^[a-zA-Z0-9]{4,16}$/;
  if (!usernameRegex.test(username.value)) {
    ElMessage.error('用户名必须是4 - 16位字母或数字');
  }
};

// 验证密码
const validatePassword = () => {
  if (password.value.length < 6 || password.value.length > 20) {
    ElMessage.error('密码必须是6 - 20位字符');
  }
};

// 验证确认密码
const validateConfirmPassword = () => {
  if (confirmPassword.value !== password.value) {
    ElMessage.error('确认密码与密码不一致');
  }
};

// 注册逻辑
const register = () => {
  let hasError = false;
  if (username.value === '' || password.value === '' || confirmPassword.value === '') {
    ElMessage.error('请输入完整信息!')
    return
  }
  const usernameRegex = /^[a-zA-Z0-9]{4,16}$/;
  if (!usernameRegex.test(username.value)) {
    ElMessage.error('用户名必须是4 - 16位字母或数字');
    hasError = true;
  }
  if (password.value.length < 6 || password.value.length > 20) {
    ElMessage.error('密码必须是6 - 20位字符');
    hasError = true;
  }
  if (confirmPassword.value !== password.value) {
    ElMessage.error('确认密码与密码不一致');
    hasError = true;
  }

  if (!hasError) {
    // 全部标准，进行注册操作
    ElMessage.success('注册成功');
    userStore.userName = username.value;
    userStore.userPassword = password.value;
    router.push({ path: '/Home' });
  }
};
</script>



<template>
  <!-- 注册容器 -->
  <div class="register-container">
    <!-- 标题 -->
    <h2 class="register-title">用户注册</h2>

    <!-- 注册表单 -->
    <form class="register-form" @submit.prevent="register">
      <!-- 用户名输入组 -->
      <div class="input-group">
        <label for="username"><strong>请输入用户名</strong></label>
        <input type="text" id="username" v-model="username" placeholder="4-16位字母或数字" @blur="validateUsername" />
      </div>

      <!-- 密码输入组 -->
      <div class="input-group">
        <label for="password"><strong>请输入密码</strong></label>
        <input type="password" id="password" v-model="password" placeholder="6-20位字符" @blur="validatePassword" />
      </div>

      <!-- 确认密码输入组 -->
      <div class="input-group">
        <label for="confirmPassword"><strong>请确认密码</strong></label>
        <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="再次输入密码"
          @blur="validateConfirmPassword" />
      </div>

      <!-- 注册按钮 -->
      <button class="register-btn">注册</button>

      <!-- 登录链接 -->
      <div class="login-link">
        已有账号？<button @click="getLogin">立即登录</button>
      </div>
    </form>
  </div>
</template>


<style scoped>
/* 注册容器样式 - 与登录页面保持一致 */
.register-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

/* 标题样式 - 与登录页面一致 */
.register-title {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 24px;
}

/* 表单样式 - 与登录页面一致 */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 输入组样式 - 与登录页面一致 */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group label {
  font-size: 14px;
  color: #666;
}

.input-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.input-group input:focus {
  outline: none;
  border-color: #409eff;
}

/* 注册按钮样式 - 与登录按钮风格一致但颜色不同 */
.register-btn {
  padding: 12px;
  background-color: #67c23a;
  /* 使用绿色表示注册操作 */
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.register-btn:hover {
  background-color: #85ce61;
}

/* 登录链接样式 - 与注册链接风格一致 */
.login-link {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.login-text {
  color: #409eff;
  text-decoration: none;
}

.login-text:hover {
  text-decoration: underline;
}
</style>
